<template>
  <div class="common-layout">
    <!-- 顶部导航栏 -->
    <el-header style="
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: darkturquoise;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      ">
      <div style="display: flex; align-items: center; gap: 10px">
        <span style="font-size: 15px">欢迎<span style="
              background-color: red;
              color: lightseagreen;
              padding: 2px 5px;
            ">
            {{ store.ccstore.nickName }} </span>登录</span>
      </div>
      <el-button @click="Exit()">退出登录</el-button>
    </el-header>

    <!-- 主体区域 -->
    <el-container style="height: calc(100vh - 130px)">
      <!-- 左侧菜单 -->
      <el-aside width="200px" style="background: #fff">
        <el-menu active-text-color="#20b2aa" background-color="#e0e0e0" :router="true" style="border-right: none"
          :default-openeds="['1']">
          <!-- 传递处理后的数据给递归组件 -->
          <RecursiveMenu :menus="processedMenuList" />
        </el-menu>
      </el-aside>

      <!-- 右侧内容区 -->
      <el-main style="padding: 20px; background: #f5f7fa">
        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
import RecursiveMenu from '@/views/LoginandTree/MenuTree.vue'; // 引入递归菜单组件
const apiUrl = import.meta.env.VITE_APP_API_URL;

const store = useCounterStore();
const router = useRouter();

// 定义菜单数据类型（修正chilDren为children）
interface MenuItem {
  menuId: number;
  menuName: string;
  url: string;
  pId: number;
  children?: MenuItem[]; // 注意字段名改为children
}

const menuList = ref<MenuItem[]>([]);
const processedMenuList = ref<MenuItem[]>([]); // 处理后的数据（修正字段名）

const GetRouter = async () => {
  try {
    const response = await axios.get<{
      code: number;
      msg: string;
      data: MenuItem[];
    }>(apiUrl + '/T5/Message/JLMenu');

    if (response.data.code === 210 && response.data.data) {
      // 转换chilDren为children（后端返回字段可能有误）
      const processedData = response.data.data.map(convertChildrenKey);
      menuList.value = processedData;
      processedMenuList.value = processedData; // 赋值给处理后的数据
    } else {
      ElMessage.error(response.data.msg || '菜单加载失败');
    }
  } catch (error) {
    ElMessage.error('菜单加载失败');
    console.error('获取菜单失败:', error);
  }
};

// 转换chilDren为children的工具函数
const convertChildrenKey = (item: MenuItem): MenuItem => {
  return {
    ...item,
    children: item.chilDren?.map(convertChildrenKey) || [] // 递归转换子节点
  };
};

const Exit = () => {
  router.push('/');
};

onMounted(() => {
  GetRouter();
});
</script>
<style scoped>
.el-header {
  background: #e0e0e0 !important;
  /* 浅灰色头部背景 */
  height: 80px;
  /* 缩短头部高度 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  /* 适当缩小内边距 */
}

.el-header span {
  background-color: transparent !important;
  font-size: 18px;
  /* 字体调大 */
  font-weight: 500;
  /* 适当加粗 */
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  /* 浅灰色边框 */
}

.el-header .el-button {
  background: #333 !important;
  /* 深灰色背景 */
  color: #fff !important;
  /* 白色文字 */
  border: 1px solid #333 !important;
  /* 深灰色边框 */
  padding: 8px 20px;
  border-radius: 24px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.el-header .el-button:hover {
  background: #444 !important;
  /* 悬停时更深的灰色 */
  border-color: #444 !important;
}
</style>
